<template>
  <div>
    <CommonTable :tableConfig="tableConfig" :tableData="tableData" :btns="btns"></CommonTable>
  </div>
</template>

<script>
import SearchBar from "../../components/SearchBar.vue";
import CommonTable from "@/components/CommonTable.vue";
import { tableDate } from "./config";
import {
  orderListApi,
  goodsDeleteApi,
  goodsDetailApi,
  goodsEditApi,
  goodsAddApi,
} from "../../api/index";
import router from "@/router";
export default {
  name: "CateList",
  components: {
    SearchBar,
    CommonTable,
  },

  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      dialogFormVisible: false,
      tableConfig: tableDate,
      title: "",
      form: {},
      formLabelWidth: 80,
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      btns: [
        {
          label: "查看详情",
          size: "small",
          type: "primary",
        },
        {
          label: "删除",
          size: "small",
          type: "danger",
        },
      ],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    buttonSumbit(type,row)  {
        console.log(type);
        console.log(row);
    },
    //这个是监听到一页展示多少条数据的控制监听函数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    //这个是监听点击哪一页就跳转到哪一页的监听函数
    handleCurrentChange(number) {
      this.page = number;
      this.getList();
    },
    addGoods() {
      this.title = "新增商品";
      this.dialogFormVisible = true;
      this.form = {};
    },

    getList() {
      orderListApi({
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 1) {
            res.data.data.forEach((item,index)=>{
                if(item.status == 0){
                    item.status = "待付款"
                }else if(item.status == 1){
                    item.status = "已付款,待发货"
                }else if(item.status == 2){
                    item.status = "已发货"
                }else if(item.status == 3){
                    item.status = "已评价"
                }
            })
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
        if (res.data.code == 401) {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000,
            onClose: () => {
              router.replace("/login");
            },
          });
        }
      });
    },
    deleteGoods(id) {
      //这里加一层modle判断确认是否删除
      this.$confirm("确认要删除这件商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          goodsDeleteApi({ id: id }).then((res) => {
            console.log(res);
            if (res.data.code == 1) {
              this.$message({
                type: "success",
                message: res.data.msg,
                duration: 1500,
                onClose: () => {
                  this.getList();
                },
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          });
        })
        .catch((err) => {
          console.log("用户点击了取消");
        });
    },
    editGoods(id) {
      this.title = "修改商品信息";
      this.dialogFormVisible = true;
      goodsDetailApi(id).then((res) => {
        if (res.data.code == 1) {
          this.form = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: "获取数据失败",
          });
        }
      });
    },
    onSubmit() {
      this.$refs.goodsForm.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            goodsEditApi(this.form).then((res) => {
              if (res.data.code == 1) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1500,
                  onClose: () => {
                    this.getList();
                    this.dialogFormVisible = false;
                  },
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                });
              }
            });
          } else {
            goodsAddApi(this.form).then((res) => {
              if (res.data.code == 1) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1500,
                  onClose: () => {
                    this.getList();
                    this.dialogFormVisible = false;
                  },
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                });
              }
            });
          }
        } else {
          this.$message({
            type: "warning",
            message: "请填写完整信息",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bigbox {
  display: flex;
  background-color: white;
  padding-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
}

.tableData_image {
  width: 180px;
  height: 100px;
}

.bannerImage {
  width: 200px;
  height: 200px;
}

.el-pagination {
  margin-top: 20px;
}
</style>
